<template>
  <div class="subMenu">
    <div v-for="item in sideMenu">
      <!-- 具有子菜单 -->
      <el-submenu index="1"
                  v-if="item.children&&item.children.length>0">
        <template slot="title">
          <i :class="item.meta.icon"
             style="margin-right:10px;font-size:20px"></i>
          <span slot="title">{{item.meta.name}}</span>
        </template>
        <el-menu-item-group>
          <sub-menu :sideMenu="item.children"></sub-menu>
        </el-menu-item-group>
      </el-submenu>
      <!-- 常规菜单 -->
      <el-menu-item v-else
                    @click="jumpRoute(item.name)">
        <i :class="item.meta.icon"
           style="margin-right:10px;font-size:20px"></i>
        <span slot="title">{{item.meta.name}}</span>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
  export default {
    name: "sub-menu",//给组件取名字之后 可以递归
    props: {
      sideMenu: {
        type: Array,
        default: () => [] //定义默认数据
      }
    },
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      jumpRoute(name) {
        this.$router.push({ name })
      }
    },
    mounted() {
      console.log(this.sideMenu)
    }
  }
</script>
<style>
</style>
